<template>
	<div>
		<div v-if="!grantVisible">
			<div class="topTitle">优惠券</div>
			<div class="container">
				<div class="handle-box row-me">
					<el-input v-model="query.name" placeholder="请输入优惠券名称" class="width300 mr20"></el-input>
					<el-date-picker v-model="query.date" type="datetimerange" range-separator="至" start-placeholder="开始投放时间"
						end-placeholder="结束投放时间" value-format="yyyy-MM-DD HH:mm:ss" @change="onChange">
					</el-date-picker>
					<div class="margin-left20 row-me">
						<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
						<el-button icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
					</div>
				</div>
				<el-button type="primary" class="handle-del mr10 margin-bottom20" @click="clickAdd">
					新建
				</el-button>
				<el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable"
					header-cell-class-name="table-header">
					<el-table-column prop="name" label="优惠券名称" align="center"></el-table-column>
					<el-table-column label="优惠券类型" align="center">
						<template slot-scope="scope">
							<span v-if="scope.row.type==1">满减券</span>
							<span v-else-if="scope.row.type==2">固定金额</span>
						</template>
					</el-table-column>
					<el-table-column label="优惠内容" align="center">
						<template slot-scope="{row}">
							<div v-if="row.type==1">
								<span v-if="row.consumerMin">满{{row.consumerMin}}元,减{{row.money}}元</span>
								<span v-else>无门槛,减{{row.money}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="type" label="使用类型" align="center">
						<template slot-scope="{row}">
							<span>{{row.useType==1?'商品':row.useType==2?'专题':row.useType==1?'VIP':''}}</span>
						</template>
					</el-table-column>
					<el-table-column label="已领取/总量" align="center">
						<template slot-scope="scope">
							<span>{{Number(scope.row.count||0)-Number(scope.row.surplusNum||0)||0}}/{{scope.row.count||0}}</span>
						</template>
					</el-table-column>
					<el-table-column label="已使用" align="center">
						<template slot-scope="{row}">
							<span>{{row.useCount}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="category" label="注册即赠送" align="center">
						<template slot-scope="{row}">
							<el-switch v-model="row.register" @change="(val)=>registerChange(row,val)">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="350" align="center">
						<template slot-scope="scope">
							<el-button type="text" @click="directional(scope.row)">定向发放
							</el-button>
							<el-button type="text" @click="openUseData(scope.row)">使用数据
							</el-button>
							<el-button type="text" @click="clickAdd(scope.row)">编辑
							</el-button>
							<el-button type="text" @click="handleLock(scope.$index, scope.row, 0)" v-if="scope.row.upStatus">停止
							</el-button>
							<el-button type="text" @click="handleLock(scope.$index, scope.row, 1)" v-else>开始
							</el-button>
							<el-button type="text" @click="handleDel(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination background layout="total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
						@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
						@current-change="handlePageChange"></el-pagination>
				</div>
			</div>
		</div>
		<!-- 使用数据 -->
		<el-dialog title="使用数据" :visible.sync="useDataVisible" :modal-append-to-body="false" append-to-body width="40%">
			<el-table v-loading="loading" :data="userTableData" border class="table" ref="multipleTable"
				header-cell-class-name="table-header">
				<el-table-column prop="preferentiaId" label="优惠券ID" align="center"></el-table-column>
				<el-table-column prop="" label="用户头像/昵称" align="center">
					<template slot-scope="{row}">
						<div v-if="row.user" class="row-me center-all">
							<img :src="row.user.headImage" class="width50 height50 radius50per margin-right10" alt="">
							<span>{{row.user.name}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="mobile" label="手机号" align="center">
					<template slot-scope="{row}">
						<span v-if="row.user">{{row.user.mobile}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="领取时间" align="center"></el-table-column>
			</el-table>
			<el-pagination class="margin-top10" background layout="->,total,sizes, prev, pager, next"
				:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChange3" :current-page="useParams.pageNumber"
				:total="useTotal" @current-change="handlePageChange3"></el-pagination>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="useDataVisible = false">关 闭</el-button>
			</span>
		</el-dialog>

		<createCoupon ref="createCoupon" :editForm="editForm" @ok="handleOk" :isEdit="isEdit"></createCoupon>

		<div v-if="grantVisible">
			<div class="crumbs">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item>
						<el-button @click="returnIndex()">返回首页</el-button>
					</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="container">
				<el-form :model="directionalForm">
					<el-form-item label="发放对象:" label-width="100px">
						<div>
							<el-radio v-model="directionalForm.type" :label="1">付费用户</el-radio>
							<div class="color606266">用户在系统内产生过交易，并支付金额大于0的用户</div>
						</div>
						<div class="color606266">
							<el-radio v-model="directionalForm.type" :label="2">指定用户</el-radio>
							<div>指定选择用户发放，同时可选多个用户</div>
							<div class="height50 width120 row-me center-all pointer" @click="addUserVisible=true"
								style="border: 1px dashed #8a8d93;" v-if="directionalForm.type==2">
								<i class="el-icon-plus margin-right10"></i><span>添加用户</span>
							</div>
							<div class="row-me row-center width600 flex-wrap margin-top10">
								<div class="padding-left10 padding-right10 margin-right20 margin-bottom10"
									style="border-radius: 10px;border: 1px solid #ccc;" v-for="(item,index) in selectUserData"
									:key="index">
									<div class="row-me center-all">
										<img :src="item.headImage" alt="" style="border-radius: 50%;width: 25px;"
											class="margin-right5" />{{item.name}}<i class="el-icon-close pointer margin-left10"
											@click="clickDel(index)"></i>
									</div>
								</div>
							</div>
						</div>
					</el-form-item>
				</el-form>
				<div class="margin-left100 margin-top50">
					<el-button @click="returnIndex">取 消</el-button>
					<el-button type="primary" @click="handleSave">确 定</el-button>
				</div>
			</div>
		</div>
		<el-dialog title="添加用户" :visible.sync="addUserVisible" :modal-append-to-body="false" append-to-body width="60%">
			<div class="row-me">
				<div class="flex1">
					<div class="height50">
						<el-input placeholder="请输入ID、用户昵称或手机号" suffix-icon="el-icon-search" v-model="userParams.name"
							class="width300" @change="getUserPage">
						</el-input>
					</div>
					<el-table v-loading="loading" :data="userData" border class="table" ref="multipleTable"
						header-cell-class-name="table-header" height="250" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="name" label="用户昵称" align="center"></el-table-column>
						<el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
					</el-table>
					<div class="pagination">
						<el-pagination background layout="total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
							@size-change="handleSizeChange2" :current-page="userParams.pageNumber" :total="userTotal"
							@current-change="handlePageChange2"></el-pagination>
					</div>
				</div>
				<div class="shu"></div>
				<div class="flex1">
					<div class="height50">已选({{multipleSelection.length}}/{{userTotal}})</div>
					<el-table v-loading="loading" :data="multipleSelection" border class="table" ref="multipleTable"
						header-cell-class-name="table-header" height="250">
						<el-table-column prop="name" label="用户昵称" align="center"></el-table-column>
						<el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
					</el-table>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addUserVisible=false">取 消</el-button>
				<el-button type="primary" @click="[addUserVisible=false,selectUserData=multipleSelection]">确 定
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import createCoupon from "@/components/createCoupon"
	export default {
		name: 'basetable',
		components: {
			createCoupon
		},
		data() {
			return {
				loading: true,
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				viewDetailVisible: false,
				grantVisible: false,
				dialogImageUrl: '',
				dialogVisible: false,
				tableData: [],
				pageTotal: 0,
				isEdit: false,
				useDataVisible: false,
				directionalForm: {},
				addUserVisible: false,
				addUserQuery: {
					name: ''
				},
				multipleSelection: [],
				editForm: {},
				userParams: {
					pageNumber: 1,
					pageSize: 30,
				},
				userData: [],
				userTotal: 0,
				selectUserData: [],
				useParams: {
					pageNumber: 1,
					pageSize: 30
				},
				useTotal: 0,
				userTableData: []
			};
		},
		created() {
			this.getData();
			this.getUserPage()
		},
		methods: {
			clickDel(index) {
				this.selectUserData.splice(index, 1)
			},
			async registerChange(row, val) {
				let form = row
				form.register = val
				const res = await this.$post('/admin/mall/addPreferentia', form)
				this.$message.success('操作成功')
				this.getData()
			},
			async handleSave() {
				if (!this.directionalForm.type || this.directionalForm.type == '') {
					this.$message.warning('请选择发放类型!')
					return
				}
				this.directionalForm.userIds = Array.from(this.selectUserData, ({
					id
				}) => id)
				const res = await this.$post('/admin/mall/sendPreferentia', this.directionalForm)
				this.$message.success('发放成功')
				this.handleOk()
			},
			async getUserPage() {
				const res = await this.$get('/admin/user/page', this.userParams)
				this.userData = res.data.list
				this.userTotal = res.data.totalRow
			},
			handleOk() {
				this.grantVisible = false
				this.form = {};
				this.getData()
			},
			onChange(val) {
				this.query.startTime = val[0]
				this.query.endTime = val[1]
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			directional(row) {
				this.grantVisible = true;
				this.directionalForm.id = row.id
			},
			openUseData(row) {
				this.useParams.preferentiaId = row.id
				this.getUserData()
				this.useDataVisible = true
			},
			async getUserData() {
				const res = await this.$get('/admin/mall/pageQueryUserPreferentia', this.useParams)
				this.userTableData = res.data.list
				this.useTotal = res.data.totalRow

			},
			clickAdd(row) {
				if (row.id) {
					this.indexVisible = false;
					this.index1Visible = true;
					this.isEdit = true
					this.editForm = row
				} else {
					this.isEdit = false
					this.indexVisible = false;
					this.index1Visible = true;
					this.editForm = {}
				}
				setTimeout(() => {
					this.$refs.createCoupon.show(row)
				})
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			handleSizeChange2(val) {
				this.$set(this.userParams, 'pageSize', val);
				this.getUserPage();
			},
			handleSizeChange3(val) {
				this.$set(this.useParams, 'pageSize', val);
				this.getUserData();
			},
			async getData() {
				const res = await this.$get('/admin/mall/pageQueryPreferentia', this.query)
				this.loading = false;
				this.tableData = res.data.list;
				this.pageTotal = res.data.totalRow;
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageNumber', 1);
				this.getData();
			},
			handleRefresh() {
				this.query = {
					title: '',
					date: [],
					pageNumber: 1,
					pageSize: 30
				}
				this.handleSearch()
			},
			// 删除操作
			handleDel(index, row) {
				let tip = "删除优惠券后,已领取/发放的优惠券,均不能继续使用,优惠券及使用数据也将全部删除。确定删除?"
				this.$confirm(tip, '提示', {
						type: 'warning'
					})
					.then(async () => {
						const res = await this.$postForm('/admin/mall/deletePreferentia', {
							id: row.id
						})
						if (res.code == 1000) {
							this.$message.success('删除成功')
							this.getData()
						}
					})
					.catch(() => {});
			},
			async handleLock(index, row, upStatus) {
				if (upStatus) {
					this.loading = true;
					const res = await this.$postForm('/admin/mall/stopPreferentia', {
						id: row.id,
						upStatus
					})
					this.$message.success('操作成功')
					this.getData()
				} else {
					let tip = "停止发券后,已领取/发放的优惠券,在可用时间内还能继续使用,但无法再编辑优惠券内容。确定停止发券?"
					// 二次确认删除
					this.$confirm(tip, '提示', {
							type: 'warning'
						})
						.then(async () => {
							this.loading = true;
							const res = await this.$postForm('/admin/mall/stopPreferentia', {
								id: row.id,
								upStatus
							})
							this.$message.success('操作成功')
							this.getData()
						})
						.catch(() => {});
				}
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			},
			// 分页导航
			handlePageChange2(val) {
				this.$set(this.userParams, 'pageNumber', val);
				this.getUserPage();
			},
			// 分页导航
			handlePageChange3(val) {
				this.$set(this.useParams, 'pageNumber', val);
				this.getUserData();
			},
			//返回首页
			returnIndex() {
				this.$confirm('当前页内容并未提交，确定返回？', '提示', {
						type: 'warning'
					})
					.then(() => {
						this.grantVisible = false
						this.form = {};
					})
					.catch(() => {});
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.shu {
		margin: 0 20px;
	}
</style>